<template>
  <div id="map"></div>
  <Header></Header>
  <BottomTools></BottomTools>
  <RouterView></RouterView>
</template>
<script setup>
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import { onMounted,provide } from "vue";
import { Scene } from "@antv/l7";
import { Mapbox } from "@antv/l7-maps";
import {RouterView} from 'vue-router'
import inControl from '../src/tools/inControl'
import initLayer from '../src/tools/initLayer'
import Header from './components/Header.vue'
import BottomTools from './components/BottomTools.vue'



mapboxgl.accessToken =
  "pk.eyJ1IjoiemhvbmdkaXNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2didWF1c3AifQ.6vOplM2NQc_xnJW3aA5ZBA";

const initMap = () => {
  const map = new mapboxgl.Map({
    container: "map",
    style: "mapbox://styles/mapbox/dark-v11", //地图风格
    center: [114.4, 30.5], //地图中心坐标
    zoom: 1, //缩放比例
  });
  const scene = new Scene({
    id: "map",
    map: new Mapbox({
      mapInstance: map,
    }),
  });
  map.on("style.load", () => {
    map.setFog({});
    // 消除边界
    map.setFilter("admin-0-boundary-disputed", [
      "all",
      ["==", ["get", "disputed"], "true"],
      ["==", ["get", "admin_level"], 0],
      ["==", ["get", "maritime"], "false"],
      ["match", ["get", "worldview"], ["all", "CN"], true, false],
    ]);
    map.setFilter("admin-0-boundary", [
      "all",
      ["==", ["get", "admin_level"], 0],
      ["==", ["get", "disputed"], "false"],
      ["==", ["get", "maritime"], "false"],
      ["match", ["get", "worldview"], ["all", "CN"], true, false],
    ]);
    map.setFilter("admin-0-boundary-bg", [
      "all",
      ["==", ["get", "admin_level"], 0],
      ["==", ["get", "maritime"], "false"],
      ["match", ["get", "worldview"], ["all", "CN"], true, false],
    ]);
  });
  inControl(scene)
  initLayer(scene)

    // 让地图变量全局化
  provide('$scene_map',{scene,map})
};

onMounted(() => {
  initMap();
});
</script>
<style>
#map {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
